<template>
  <div class="template-index-Lu">
    <commpVxeTable
      :key="reCommpVxeTable"
      :config="dataTableConfig"
      :columns="columnsVxe"
      :formItem="formItem"
      ref="administrativeOffice"
      @searchEvent="searchEvent"
      @resetEvent="resetEvent"
      class="commpVxeTable-Lu"
      >
      <template v-slot:operation_fxm="{row}" data-desc="姓名">
          <span style="padding-right: 21;" v-if="row.fxm.length == 2">
              <span v-for="(trem,tI) in row.fxm.split('')" :key="tI" >
                  {{trem}}
                  <span v-if="tI+1 !== row.fxm.split('').length">&nbsp;&nbsp;</span>
              </span>
          </span>
          <span style="padding-right: 21;" v-else>{{ row.fxm }}</span>
      </template>
      <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
        <a-form layout="inline" class="search-form" >
          <a-form-item>
              <a-button class="blue-btn" type="primary" @click="showDrawer(row)" icon="eye">查看</a-button>
          </a-form-item>
          <a-form-item>
            <a-popconfirm
              title="确定要下载Png图片吗？"
              @confirm="() => downloadPng(row)"
            >
            <a-button class="blue-btn" type="primary" icon="vertical-align-bottom">下载Png图片</a-button>
            </a-popconfirm>
          </a-form-item>
          <a-form-item>
            <a-popconfirm
              title="确定要下载excel文件吗？"
              @confirm="() => downloadExcel(row)"
            >
            <a-button class="blue-btn" type="primary" icon="vertical-align-bottom">下载excel文件</a-button>
            </a-popconfirm>
          </a-form-item>
        </a-form>
      </template>
    </commpVxeTable>
    <a-drawer
      title="表格详情"
      placement="right"
      :width="400"
      :visible="drawerVisible"
      @close="CloseDrawer"
      >
      <table  border="1" cellspacing="0" class="gzDrawerTable">
        <tr v-for="(item,index) in logsXqList" :key="index">
          <th>{{ item[0] }}</th>
          <td>{{ item[1] }}</td>
        </tr>
      </table>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'left',
          zIndex: 1,
        }"
      >
        <a-button type="primary" class="blue-btn" @click="CloseDrawer">
          关闭
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api.js'
import {queryGzjlxqById,downGzjlxqPngFile,downGzjlxqExcelFile} from '../logs/service/index'
export default {
  components: {
    commpVxeTable,
  },
  data() {
    return {
      reCommpVxeTable: '',
      dataTableConfig: {
        api: assessCheckApi.list,
        rowId: 'id',
        paramet: {},
      },
      columnsVxe: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '序号',
          field: 'forder',
          width: 110,
          titleInterval:true,
          slots: {
              header:'data1_header',
          }
        },{
          title: '姓名',
          field: 'fxm',
          width: 110,
          titleInterval:true,
          slots: {
              header:'data2_header',
              default:'operation_fxm',
          }
        },{
          title: '工资套餐类型',
          field: 'fgztclx',
        },{
          title: '年份',
          field: 'fnf',
          width: 100,
          titleInterval:true,
          slots: {
              header:'data3_header',
          }
        },{
          title: '月份',
          field: 'fyf',
          width: 80,
          titleInterval:true,
          slots: {
              header:'data4_header',
          }
        },{
          title: '操作',
          field: 'jobid',
          width: 400,
          titleInterval:true,
          slots: {
          // 使用插槽模板渲染
            header:'data5_header',
            default: 'operation_btn',
          },
        }
      ],
      formItem: [
        {
          label: '年份',
          model: 'fnf',
        },{
          label: '月份',
          model: 'fyf',
        },
      ],
      drawerVisible: false,
      logsXqList: [],

    }
  },
  methods: {
    // 搜索
    searchEvent(){
      this.dataTableConfig.paramet = {
        ...this.dataTableConfig.paramet,
      }
    },
    // 重置
    resetEvent(){
      this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
      }
    },
    showDrawer(row) {
      queryGzjlxqById({id:row.id}).then(res => {
        this.logsXqList = []
        this.logsXqList = res.result.gzjlxqList
        this.drawerVisible = true;
      })
    },
    CloseDrawer() {
      this.drawerVisible = false;
    },
    // 下载Png图片文件-工资记录详情
    downloadPng(row){
      downGzjlxqPngFile({id:row.id}).then(res => {
        var fileName = row.fxm + row.fnf+'/' + row.fyf + '/'+ '工资图片'
        if (!res) {
            this.$message.warning('图片下载失败')
            return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([res], { type: 'application/vnd.ms-excel' }), fileName + '.png')
        } else {
            let url = window.URL.createObjectURL(new Blob([res], { type: 'application/vnd.ms-excel' }))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName + '.png')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) //下载完成移除元素
            window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
    // 下载excel文件-工资记录详情
    downloadExcel(row){
      downGzjlxqExcelFile({id:row.id}).then((data) => {
        var fileName = row.fxm + row.fnf+'/' + row.fyf + '/' + '工资记录'
        if (!data) {
            this.$message.warning('文件下载失败')
            return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
        } else {
            let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName + '.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) //下载完成移除元素
            window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
  },
}
</script>
<style>
@import url('../../css/oaLess.css');
@import url('../../css/oaClass.css');
</style>
